<template>
    <div class="main-container">
        <el-row :gutter="20">

            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="card" shadow="never">
                    <div slot="header">
                        <span class="tips">协同反馈督察排行</span>
                        <!-- <el-button type="success" class="right" icon="el-icon-plus" @click="handleAdd">新增</el-button> -->
                    </div>
                    <el-table
                            v-loading="listLoading"
                            ref="listTable"
                            stripe
                            :data="list"
                            :element-loading-text="elementLoadingText"
                            highlight-current-row
                            border
                            @current-change="handleCurrentChange"
                            height="calc(100vh - 310px)"
                    >
                        <template slot="empty">
                            <el-empty :image-size="200"></el-empty>
                        </template>
                        <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
                        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="id"
                          label="序号"
                          align="center"
                          width="80px"
                        ></el-table-column>             -->
                      <el-table-column  label="序号" width="55" align="center">
                        <template slot-scope="scope">
                          {{(queryForm.pageNo-1) * queryForm.pageSize+scope.$index+1}}
                        </template>
                      </el-table-column>

                        <el-table-column
                                show-overflow-tooltip
                                prop="name"
                                label="部门名称"
                                align="center"
                        ></el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                prop="count"
                                label="协同总数量"
                                width="180px"
                                align="center"
                        ></el-table-column>
                      <el-table-column
                          show-overflow-tooltip
                          prop="order_count"
                          label="协同警令数量"
                          width="180px"
                          align="center"
                      ></el-table-column>
                      <el-table-column
                          show-overflow-tooltip
                          prop="alarm_count"
                          label="协同警情数量"
                          width="180px"
                          align="center"
                      ></el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                prop="points"
                                label="反馈督察总分"
                                align="center"
                                width="180px"
                        ></el-table-column>

                        <el-table-column show-overflow-tooltip label="平均督察得分" align="center" width="180px">
                            <template #default="{ row }">
                                <span v-if="row.pjz != null">{{ row.pjz }}</span>
                                <span v-else>0</span>
                            </template>
                        </el-table-column>
                        <!--<el-table-column type="index" label="序号" width="80px"></el-table-column>-->
                        <el-table-column show-overflow-tooltip label="排行" align="center" type="index" width="180px">
                            <template slot-scope="scope">
                                {{(queryForm.pageNo-1) * queryForm.pageSize+scope.$index+1}}
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination
                            background
                            :current-page="queryForm.pageNo"
                            :page-size="queryForm.pageSize"
                            :layout="layout"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange2"
                    ></el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import {getRanking} from '@/api/warningOrderDept'

    export default {
        name: 'Index',
        components: {},
        data() {
            return {
                value1: '',
                checked: false,
                isShow: false,
                list: [],
                listLoading: true,
                layout: 'total, sizes, prev, pager, next, jumper',
                total: 0,
                selectRows: '',
                elementLoadingText: '正在加载...',
                queryForm: {
                    pageNo: 1,
                    pageSize: 10,
                },
            }
        },
        created() {
            this.fetchData()
        },
        beforeDestroy() {
        },
        mounted() {
        },
        methods: {
            handleCurrentChange(val) {
                this.selectRows = val
            },
            handleSizeChange(val) {
                this.queryForm.pageSize = val
                this.fetchData()
            },
            handleCurrentChange2(val) {
                this.queryForm.pageNo = val
                this.fetchData()
            },
            handlechuli(row) {
                this.$refs['views'].showDia(row.id)
            },
            handlecancel(row) {
                if (row.id) {
                    this.$baseConfirm('确认进行撤消？', null, async () => {
                        const {msg} = await doDelete({ids: row.id})
                        this.$baseMessage(msg, 'success')
                        this.fetchData()
                    })
                } else {

                }
            },
            queryData() {
                this.queryForm.pageNo = 1
                this.fetchData()
            },
            moreQuery() {
                this.isShow = !this.isShow
            },
            async fetchData() {
                this.listLoading = true
                const {data} = await getRanking(this.queryForm)
                console.log("排行data：")
                console.log(data)
                this.list = data.list
                this.total = data.total
                setTimeout(() => {
                    this.listLoading = false
                }, 300)
            },
        },
    }
</script>
